<template>
  <div id="app">
    <div class="hamburger" @click="isSidebarOpen = !isSidebarOpen" v-show="isMobile">
      ☰
    </div>

    <!-- 侧边导航栏（移动端） -->
    <transition name="slide">
      <div class="sidebar" v-show="isSidebarOpen && isMobile">
        <div class="close-btn" @click="isSidebarOpen = false">×</div>
        <div class="sidebar-content">
          <router-link 
            v-for="(item, index) in navigationItems" 
            :key="index" 
            :to="item.route"
            @click.native="isSidebarOpen = false"
            class="sidebar-link"
            exact-active-class="active"
          >
            {{ item.label }}
          </router-link>
          <router-link to="/login-register" @click.native="isSidebarOpen = false">
            登录 / 注册
          </router-link>
        </div>
      </div>
    </transition>

    <!-- 固定的导航栏 -->
    <div class="header" v-show="!isMobile">
      <div class="left_section">
        <img class="logo" src="../assets/ffyy.png" alt="Logo">

        <!-- 使用 v-for 渲染导航项，替换为 router-link -->
        <router-link 
          v-for="(item, index) in navigationItems" 
          :key="index" 
          :to="item.route" 
          :class="['nav-item', item.class]"
          exact-active-class="active"
        >
          {{ item.label }}
        </router-link>

        <div class="findcontent">
          <img class="find" src="../assets/find.png" alt="Find Icon">
        </div>
      </div>

      <div class="right_section">
        <!-- 可更改的头像组件 -->
        <el-upload
            class="avatar-uploader"
            :auto-upload="false" 
            :show-file-list="false"
            :on-change="handleAvatarChange" 
        >
    <el-avatar :size="40" :src="avatarUrl">
      <img v-if="!avatarUrl" :src="defaultAvatar" alt="默认头像"/>
    </el-avatar>
  </el-upload>

        <router-link to="/login-register">
          <button class="login_register">登录 / 注册</button>
        </router-link>
      </div>
    </div>

    <!-- 动态渲染页面内容（这里是二级路由的展示） -->
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 导航栏数据，添加 route 属性来指定路由路径
      navigationItems: [
        { label: '专业指南', class: 'index', route: '/' },
        { label: '路线图', class: 'route', route: '/route' },
        { label: '飞云社区', class: 'community', route: '/community' },
        { label: '我的', class: 'mine', route: '/mine' }
      ],
      isMobile: false,
      isSidebarOpen: false,
	  avatarUrl: localStorage.getItem('avatar') || require('../assets/head_photo.png'),
      defaultAvatar: require('../assets/head_photo.png')
    };
  },
  mounted() {
    this.checkMobile();
    window.addEventListener('resize', this.checkMobile);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkMobile);
  },
  methods: {
    checkMobile() {
      this.isMobile = window.innerWidth <= 768;
    },
	handleAvatarChange(file) {
      // 本地预览
      this.avatarUrl = URL.createObjectURL(file.raw)
      localStorage.setItem('avatar', this.avatarUrl)
      
      // 如果需要真实上传，可以在此处调用API
      // this.uploadToServer(file.raw)
    }
  }
}
</script>

<style>
  .header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid black; /* 添加底部边框 */
    padding-bottom: 1px; /* 距离底部5px */
  }

  .left_section {
    display: flex;
    align-items: center;
    width: 70%;
    padding: 0 120px;
    font-size: 22px;
    color: #333;
    cursor: pointer;
  }

  .logo {
    width: 170px;
    height: 100px;
    object-fit: cover;
    margin-right: 50px;
  }

  .nav-item {
    margin-right: 50px;
    text-decoration: none;
    color: inherit;
  }

  .nav-item:hover {
    color: #007bff;
  }

  .nav-item.active {
    color: #068cea;
  }

  .findcontent{
    /* Rectangle 62 */
    align-items: center;
  width: 272px;
  height: 40px;
  background: rgba(217, 217, 217, 0.6);
  border-radius: 23.5px;
  overflow: hidden; /* 使父容器能够包裹住浮动元素 */
  }

  .find {
    width: 24px;
    height: 24px;
    object-fit: cover;
    float: left; /* 将图片浮动到左边 */
    margin-left: 10px; 
    margin-top: 8px;
  }

  .right_section {
    display: flex;
    align-items: center;
    width: 30%;
  }

  .head_photo {
    width: 28px;
    height: 28px;
    object-fit: cover;
    margin-right: 10px;
  }

  .login_register {
    width: 245px;
    height: 33px;
    font-size: 16px;
    color: white;
    cursor: pointer;
    background-color: #1ba3ff;
    border: none;
    border-radius: 10px;
    padding: 0 20px;
    transition: background-color 0.3s;
  }

  .login_register:hover {
    background-color: #007bff;
  }

.el-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
}

  /* 移动端样式 */
@media (max-width: 768px) {
  .header {
    display: none;
  }

  .hamburger {
    position: fixed;
    top: 20px;
    left: 20px;
    font-size: 40px; 
    z-index: 1000;
    cursor: pointer;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    background: white;
    z-index: 999;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
  }

  .sidebar-content {
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    gap: 20px;
  }

  .sidebar-link {
    text-decoration: none;
    color: inherit;
    font-size: 18px;
    margin-bottom: 10px;
  }

  .sidebar-link.active {
    color: #068cea;
  }

  .sidebar a {
    text-decoration: none;
    color: #333;
  }

  .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 40px;
    cursor: pointer;
  }

  /* 隐藏桌面端不需要的元素 */
  .findcontent,
  .right_section .login_register {
    display: none;
  }

  /* 调整logo大小 */
  .logo {
    width: 120px;
    height: 70px;
  }
}

/* 过渡动画 */
.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s;
}
.slide-enter, .slide-leave-to {
  transform: translateX(-100%);
}

/* 桌面端原有样式调整 */
@media (min-width: 769px) {
  .hamburger,
  .sidebar {
    display: none;
  }
  
}
</style>
